<template>
  <div>
    <a-form :form="form" @submit="handleSubmit">
      <a-form-item v-show="false" v-bind="formItemLayout">
        <a-input type="hidden" v-decorator="['id']"></a-input>
      </a-form-item>
      <a-form-item v-show="false" v-bind="formItemLayout">
        <a-input type="hidden" v-decorator="['pid']"></a-input>
      </a-form-item>
      <a-form-item label="类型：" v-bind="formItemLayout">
        <a-radio-group
          buttonStyle="solid"
          :disabled="openType == 'edit'"
          v-decorator="[
            'type',
            { 
              rules: [{ required: true, message: '请选择菜单类型' }] 
            }
          ]"
          @change="menuTypeChange"
        >
          <a-radio-button value="column">目录</a-radio-button>
          <a-radio-button value="menu">菜单</a-radio-button>
          <a-radio-button value="button">按钮</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="名称：" v-bind="formItemLayout">
        <a-input 
          type="text"
          v-decorator="['title', { rules: [{ required: true, message: '请输入菜单名' }] }]">
        </a-input>
      </a-form-item>
      <a-form-item label="父菜单：" v-bind="formItemLayout">
        <a-tree-select
          style="width:100%"
          :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
          :disabled="openType == 'edit' && menuType == 'button'"
          :treeData="treeData"
          :treeDefaultExpandedKeys="expandedNodes"
          treeNodeFilterProp="title"
          v-decorator="['pMenu', { rules: [{ required: true }] }]"
        >
        </a-tree-select>
      </a-form-item>
      <a-form-item label="访问路径：" v-bind="formItemLayout" v-show="newMenuType !== 'button'">
        <a-input
          type="text"
          v-decorator="['path', { rules: [{ message: '请输入访问路径' }] }]"
        >
        </a-input>
      </a-form-item>
      <a-form-item label="组件标识：" v-bind="formItemLayout" v-show="newMenuType == 'menu'">
        <a-input
          type="text"
          v-decorator="['label', { rules: [{ message: '请输入组件标识' }] }]"
        >
        </a-input>
      </a-form-item>
      <a-form-item label="权限标识" v-bind="formItemLayout" v-show="newMenuType !== 'column'">
        <a-input
          type="text"
          v-decorator="['permName']"
          placeholder="请输入权限标识"
        ></a-input>
      </a-form-item>
      <a-form-item label="图标：" v-bind="formItemLayout"  v-show="newMenuType !== 'button'">
        <a-input type="text" v-decorator="['icon']"> </a-input>
      </a-form-item>
      <a-form-item label="排序：" v-bind="formItemLayout">
        <a-input type="number" v-decorator="['order']"> </a-input>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
  export default {
    name: 'AddMenu',
    data() {
      return {
        form: this.$form.createForm(this),
        formItemLayout: {
          labelCol: {
            xs: { span: 5 }
          },
          wrapperCol: {
            xs: { span: 17 }
          },
        },
        newMenuType: this.menuType,
      }
    },
    props: {
      treeData: {
        type: Array,
      },
      expandedNodes: {
        type: Array
      },
      menuType: {
        type: String
      },
      openType: {
        type: String
      }
    },
    methods: {
      menuTypeChange(e){
        this.newMenuType = e.target.value;
        this.fixedTreeData(this.treeData)
      },
      fixedTreeData (data) {
        // 修改为antd控件需要的不同属性名
        for (var i = data.length - 1; i >= 0; i--) {
          var item = data[i];
          item.disabled = false;
          if(
            this.newMenuType === 'column' && (item.type === 'menu' || item.type === 'button') ||
            this.newMenuType === 'menu' && (item.type === 'menu' || item.type === 'button') ||
            this.newMenuType === 'button' && (item.type === 'column' || item.type === 'button' || !item.type)
            ){
            item.disabled = true
          }
          if (item.children) {
            this.fixedTreeData(item.children)
          }
        }
      },
      handleSubmit() {
        let validateRes = false;
        this.form.validateFields((err, values) => {
          if (err) {
            this.$message.error('请正确填写表单');
          }else{
            validateRes = true
          }  
        });

        if(validateRes){
          return this.axios({
            url: '/system/menu/list/'+ this.openType,
            method: 'post',
            data: this.form.getFieldsValue()
          })
        }else{
          return new Promise((resolve, reject) => {
            reject('表单校验失败')
          })
        }
      },
      handleReset() {
        this.form.resetFields();
      },
    },
    created () {
      this.fixedTreeData(this.treeData);
    },
  }
</script>

<style lang="scss" scoped>

</style>